<template>
  <div class="el-btn">
    <!-- 普通按钮 -->
    <ElButtonPlus type="primary" @click="handleClick">普通按钮</ElButtonPlus>

    <!-- 带前缀图标的按钮 -->
    <ElButtonPlus type="success" prefixIcon="el-icon-check" @click="handleClick">
      前缀图标按钮
    </ElButtonPlus>

    <!-- 带后缀图标的按钮 -->
    <ElButtonPlus type="warning" suffixIcon="el-icon-close" @click="handleClick">
      后缀图标按钮
    </ElButtonPlus>

    <!-- 带前后缀图标的按钮 -->
    <ElButtonPlus type="info" prefixIcon="el-icon-edit" suffixIcon="el-icon-share" @click="handleClick">
      前后缀图标按钮
    </ElButtonPlus>
    <!-- 使用 icon 属性添加图标 -->
    <el-button-plus icon="edit">icon 属性添加图标</el-button-plus>
    <!-- 同时使用 prefixIcon 和 icon -->
    <el-button-plus icon="delete" suffix-icon="el-icon-share">icon 属性添加图标1</el-button-plus>
    <!-- 防抖按钮 -->
    <ElButtonPlus type="danger" :debounceWait="1000" @click="handleClick">
      防抖按钮 (1秒)
    </ElButtonPlus>

    <!-- 节流按钮 -->
    <ElButtonPlus type="primary" :throttleWait="2000" @click="handleClick">
      节流按钮 (2秒)
    </ElButtonPlus>
    <!-- 带自定义插槽的按钮 -->
    <ElButtonPlus type="warning" @click="handleClick">
      <template #prefixIcon>
        <i class="el-icon-star-on"></i>
      </template>
      带自定义插槽的按钮
      <template #suffixIcon>
        <i class="el-icon-star-off"></i>
      </template>
    </ElButtonPlus>
    <!--异步模拟-->
    <ElButtonPlus type="primary" async @async-click="handleAsyncClick">
      异步按钮
    </ElButtonPlus>
    <!-- 插槽 -->
    <ElButtonPlus>
      <!-- 使用原生 default 插槽 -->
      自定义插槽内容
      <!-- 使用新增的 left-text 插槽 -->
      <template #left-text>
        <span>Before </span>
      </template>
      <!-- 使用新增的 right-icon 插槽 -->
      <template #right-icon>
        <i class="el-icon-arrow-right"></i>
      </template>
    </ElButtonPlus>
    <!-- 基本提示 -->
    <el-button-plus
        tooltip-content="刷新数据"
        tooltip-placement="top"
    >
      <i class="el-icon-refresh" slot="icon" />
      tooltip提示
    </el-button-plus>
    <el-button-plus v-waves type="primary">波纹按钮</el-button-plus>
  </div>
</template>
<script>
import ElButtonPlus from "@/components/button/elButtonPlus.vue";

export default {
  name: "elButtonDemo",
  components: {ElButtonPlus},
  methods: {
    handleClick() {
      console.log("按钮被点击了");
    },
    handleAsyncClick({event, done}) {
      setTimeout(() => {
        done();
        console.log("异步按钮被点击了");
      }, 2000);
    }
  }
}
</script>

<style scoped lang="less">
/* 自定义主题样式 */
.btn-theme-dark {
  background-color: #333 !important;
  color: #fff !important;
}

.btn-theme-dark:hover {
  background-color: #555 !important;
}

.el-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>